<template>
  <div class="app-container">
    <!-- 顶部工具栏 -->
    <div class="toolbar">
      <div class="left-buttons">
        <el-button
          type="primary"
          icon="el-icon-back"
          @click="goBack"
          class="back-button"
          >返回</el-button
        >
      </div>
      <div class="right-buttons">
        <el-button
          v-if="type !== 'view'"
          type="success"
          icon="el-icon-check"
          @click="saveData"
          >保存</el-button
        >
        <el-button
          v-if="type !== 'view'"
          type="primary"
          icon="el-icon-plus"
          @click="addItem"
          >新增</el-button
        >
        <el-button
          v-if="type !== 'view'"
          type="danger"
          icon="el-icon-delete"
          @click="deleteSelected"
          >批量删除</el-button
        >
        <el-button type="" icon="el-icon-menu" @click="goToList"
          >列表</el-button
        >
      </div>
    </div>

    <table class="application-table">
      <caption>
        <h2>
          人事档案
          <el-checkbox v-model="isCancel" :disabled="type === 'view'"
            >注销</el-checkbox
          >
          <el-checkbox v-model="isDiscard" :disabled="type === 'view'"
            >报废</el-checkbox
          >
          申请单
        </h2>
      </caption>
      <div style="max-width: 1200px; overflow: auto">
        <thead>
          <tr>
            <th>
              <el-checkbox
                v-model="isAllSelected"
                @change="toggleSelectAll"
                :disabled="type === 'view'"
              ></el-checkbox>
            </th>
            <th>序号</th>
            <th>事业部</th>
            <th>部门</th>
            <th>姓名</th>
            <th>性别</th>
            <th>工号</th>
            <th>入职日期</th>
            <th>离职日期</th>
            <th>离职类别</th>
            <th>工作年限</th>
            <th>档案注销日期</th>
            <th>档案预计报废日期</th>
            <th>档案报废日期</th>
            <th>报废方式</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in list" :key="index">
            <td>
              <el-checkbox
                v-model="selectedItems"
                :value="index"
                :disabled="type === 'view'"
              ></el-checkbox>
            </td>
            <td>{{ index + 1 }}</td>
            <td>
              <el-input
                v-model="item.businessUnit"
                :disabled="type === 'view'"
              />
            </td>
            <td>
              <el-input v-model="item.department" :disabled="type === 'view'" />
            </td>
            <td>
              <el-input
                v-model="item.employeeName"
                :disabled="type === 'view'"
              />
            </td>
            <td>
              <el-select v-model="item.gender" :disabled="type === 'view'">
                <el-option label="男" value="男" />
                <el-option label="女" value="女" />
              </el-select>
            </td>
            <td>
              <el-input
                v-model="item.employeeNumber"
                :disabled="type === 'view'"
              />
            </td>
            <td>
              <el-date-picker
                v-model="item.entryDate"
                type="date"
                :disabled="type === 'view'"
              />
            </td>
            <td>
              <el-date-picker
                v-model="item.leaveDate"
                type="date"
                :disabled="type === 'view'"
              />
            </td>
            <td>
              <el-select v-model="item.leaveType" :disabled="type === 'view'">
                <el-option label="自离" value="自离" />
                <el-option label="辞职" value="辞职" />
                <el-option label="辞退" value="辞退" />
                <el-option label="开除" value="开除" />
              </el-select>
            </td>
            <td>
              <el-input
                v-model="item.workYears"
                type="number"
                :disabled="type === 'view'"
              />
            </td>
            <td>
              <el-date-picker
                v-model="item.cancelDate"
                type="date"
                :disabled="type === 'view'"
              />
            </td>
            <td>
              <el-date-picker
                v-model="item.expectedDiscardDate"
                type="date"
                :disabled="type === 'view'"
              />
            </td>
            <td>
              <el-date-picker
                v-model="item.actualDiscardDate"
                type="date"
                :disabled="type === 'view'"
              />
            </td>
            <td>
              <el-input
                v-model="item.discardMethod"
                :disabled="type === 'view'"
              />
            </td>
          </tr>
        </tbody>
      </div>
      <tr>
        <td colspan="15">
          <div class="notes">
            <p style="margin: 0px 20px">
              说明：离职类别含自离、辞职、辞退、开除。
            </p>
          </div>
          <div class="approval-section">
            <div class="approval-row">
              <span>注销审批栏</span>&emsp;&emsp;&emsp;&emsp;
              <span
                >批准：<el-input
                  v-model="approvalData.cancelApprover"
                  :disabled="type === 'view'"
              /></span>
              <span
                >审核：<el-input
                  v-model="approvalData.cancelReviewer"
                  :disabled="type === 'view'"
              /></span>
              <span
                >编&emsp;制：<el-input
                  v-model="approvalData.cancelCompiler"
                  :disabled="type === 'view'"
              /></span>
            </div>
            <div class="approval-row">
              <span>报废审批栏</span>&emsp;&emsp;&emsp;&emsp;
              <span
                >批准：<el-input
                  v-model="approvalData.discardApprover"
                  :disabled="type === 'view'"
              /></span>
              <span
                >审核：<el-input
                  v-model="approvalData.discardReviewer"
                  :disabled="type === 'view'"
              /></span>
              <span
                >申请人：<el-input
                  v-model="approvalData.discardApplicant"
                  :disabled="type === 'view'"
              /></span>
            </div>
          </div>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
import {
  getArchiveCancelById,
  saveOrUpdateBatchArchiveCancel,
} from "@/api/archiveCancel";

export default {
  name: "ArchiveCancel",
  data() {
    return {
      type: "create",
      id: undefined,
      list: [],
      selectedItems: [],
      isAllSelected: false,
      isCancel: false,
      isDiscard: false,
      approvalData: {
        cancelApprover: "",
        cancelReviewer: "",
        cancelCompiler: "",
        discardApprover: "",
        discardReviewer: "",
        discardApplicant: "",
      },
    };
  },
  created() {
    const { type, id } = this.$route.query;
    this.type = type || "create";
    this.id = id;

    if (this.type === "create") {
      this.addItem();
    } else if (this.id) {
      this.fetchData();
    }
  },
  methods: {
    fetchData() {
      getArchiveCancelById(this.id).then((response) => {
        const data = response.data.data;
        this.list = [data];
        // 设置审批信息
        this.approvalData = {
          cancelApprover: data.cancelApprover,
          cancelReviewer: data.cancelReviewer,
          cancelCompiler: data.cancelCompiler,
          discardApprover: data.discardApprover,
          discardReviewer: data.discardReviewer,
          discardApplicant: data.discardApplicant,
        };
      });
    },
    saveData() {
      // 表单验证
      for (const item of this.list) {
        if (!item.employeeName) {
          this.$message({
            message: "请填写员工姓名",
            type: "warning",
          });
          return;
        }
        if (!item.employeeNumber) {
          this.$message({
            message: "请填写员工工号",
            type: "warning",
          });
          return;
        }
      }

      // 合并审批信息
      const records = this.list.map((item) => ({
        ...item,
        ...this.approvalData,
      }));

      saveOrUpdateBatchArchiveCancel(records).then(() => {
        this.$message({
          type: "success",
          message: this.type === "create" ? "创建成功!" : "更新成功!",
        });
        this.goToList();
      });
    },
    addItem() {
      this.list.push({
        businessUnit: "",
        department: "",
        employeeName: "",
        gender: "",
        employeeNumber: "",
        entryDate: null,
        leaveDate: null,
        leaveType: "",
        workYears: null,
        cancelDate: null,
        expectedDiscardDate: null,
        actualDiscardDate: null,
        discardMethod: "",
      });
    },
    toggleSelectAll() {
      if (this.isAllSelected) {
        this.selectedItems = this.list.map((_, index) => index);
      } else {
        this.selectedItems = [];
      }
    },
    deleteSelected() {
      if (this.selectedItems.length === 0) {
        this.$message({
          message: "请选择要删除的记录",
          type: "warning",
        });
        return;
      }

      this.selectedItems.sort((a, b) => b - a);
      this.selectedItems.forEach((index) => {
        this.list.splice(index, 1);
      });
      this.selectedItems = [];
      this.isAllSelected = false;
    },
    goToList() {
      this.$router.push("/main/renshi/renshizhidu/rsdazhuxiao/rsdazhuxiaoList");
    },
    goBack() {
      this.$router.push("/main/renshi/renshizhidu");
    },
  },
  watch: {
    selectedItems: {
      handler(newVal) {
        this.isAllSelected = newVal.length === this.list.length;
      },
      deep: true,
    },
    isCancel(val) {
      if (val) this.isDiscard = false;
    },
    isDiscard(val) {
      if (val) this.isCancel = false;
    },
  },
};
</script>

<style scoped>
.app-container {
  padding: 20px;
  /* background-color: #f5f7fa; */
  min-height: calc(100vh - 40px);
  max-width: 1200px;
  margin: 0 auto;
}

.toolbar {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  background-color: #fff;
  padding: 15px;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  align-items: center;
}

.left-buttons {
  /* position: absolute;
    top: 20px;
    left: 20px;
    z-index: 1; */
}

.back-button {
  /* margin-right: 10px; */
}

.right-buttons {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

.application-table {
  border-collapse: collapse;
  width: 100%;
  margin-top: 10px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.application-table td,
.application-table th {
  border: 1px solid #ebeef5;
  padding: 12px;
  text-align: center;
}

.application-table caption {
  padding: 12px;
  background-color: #fff;
  border-bottom: 1px solid #ebeef5;
}

.application-table caption h2 {
  margin: 0;
  font-size: 1.2em;
  color: #303133;
}

.notes {
  margin-top: 10px;
  text-align: left;
}

.approval-section {
  margin-top: 10px;
  width: 100%;
}

.approval-row {
  margin-bottom: 5px;
  text-align: left;
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
}

/* Element UI 组件样式调整 */
.el-input {
  width: 120px;
}

.el-date-picker {
  width: 120px;
}

.el-select {
  width: 120px;
}
</style>